<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    // 观察者
    // 1、添加观察者
    // 2、通知所有观察者
    class Subject {
      constructor(){
        // 存储所有观察者
        this.observers = []
      }
      // 添加观察者
      addObserver(observer){
        if (observer && observer.updata) {
          this.observers.push(observer)
        }
      }
      // 通知观察者
      notify () {
        // 调用观察者列表中每个观察者的更新方法
        this.observers.forEach(observer => {
          observer.updata()
        })
      }
    }
    // 被观察者
    // 1、当观察目标发生状态变化时、进行更新
    class Observer {
      updata () {
        console.log("事件发生了,进行相应处理...")
      }
    }

    //功能测试
    const subject = new Subject()
    const ob1 = new Observer()
    const ob2 = new Observer()

    // 将观察者添加给要观察的观察目标
    subject.addObserver(ob1)
    subject.addObserver(ob2)

    // 通知观察者进行操作（具体场景
    subject.notify()
  </script>
</body>
</html>